<!--
粘性定位
    被认为是相对定位、固定定位的混合。
        position: sticky;
特点
    1（固定定位特点）：以浏览器可视区为参照点
    2（相对定位特点）：脱标，占有原来的位置
    3 【必须】添加一个偏移属性【四选一：top、left、right、bottom】，才能使粘性定位起作用
其它
    - 兼容性问题：IE都不支持（参考caniuse.com）
    - 应用：经常跟页面滚动搭配。

    粘性元素会跟随页面滚动，
        滚到特定位置后，粘性元素则会固定不动
        滚出特定位置后，粘性元素则会跟随页面继续滚动
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .w {
        width: 800px;
        margin: 0 auto;
    }
    .banner {
        height: 300px;
        background: rgb(90, 180, 232);
    }
    .nav {
        /* ------------- */
        position: sticky;
        top: 0;
        /* ------------- */
        height: 70px;
        background: rgb(51, 105, 212);
    }
    .main {
        height: 800px;
        background: cyan;
    }
    .footer {
        height: 200px;
        background: skyblue;
    }
</style>

<div class="banner w">广告区域</div>
<div class="nav w">导航栏：粘性定位</div>
<div class="main w">内容区域</div>
<div class="footer w">底部内容</div>